<div class="layout-setting p-5">
  @let component = content.content;
  @let elements = component?.elements;
  <app-formly [fields]="content.fields" [model]="model" (modelChange)="onModelChange($event)" />
  <div class="flex justify-center items-center -mt-5 mb-5">
    @if (model?.component?.animate?.aos?.enable) {
      <app-btn
        (click)="applyAosAllTopComponent(model.component.animate)"
        [content]="{
          label: '一键应用该AOS动画',
          color: 'primary',
          mode: 'stroked',
        }"
      />
    }
  </div>
  @if (elements?.length) {
    <div class="loop-elements">
      <mat-list cdkDropList (cdkDropListDropped)="drop($event)">
        <div mat-subheader>子项</div>
        @for (widget of elements; track widget; let i = $index) {
          <mat-list-item cdkDrag>
            <app-icon matListItemIcon [content]="{ svg: 'dots-vertical' }" />
            <div matListItemTitle>{{ i + 1 }}.{{ widget?.type }}</div>
            @if (widget.title | isString) {
              <div matListItemLine class="title">
                {{ widget?.title }}
              </div>
            }
            <div class="actions">
              <app-btn
                (click)="onDelete(elements, i)"
                [content]="{
                  label: '',
                  mode: 'icon',
                  icon: { svg: 'delete' },
                }"
              />
              <app-btn
                (click)="onCopy(elements, i)"
                [content]="{
                  label: '',
                  mode: 'icon',
                  icon: { svg: 'content-copy' },
                }"
              />
            </div>
          </mat-list-item>
        }
      </mat-list>
    </div>
  }
  <div class="actions flex flex-col justify-center items-center gap-5 my-5">
    <div class="flex justify-center items-center gap-3">
      <app-btn
        (click)="editorJSON()"
        [content]="{
          label: '编辑 JSON',
          color: 'primary',
          mode: 'stroked',
        }"
      />
      @if (component.type === 'custom-template') {
        <app-btn
          (click)="editorCode()"
          [content]="{
            label: '编辑自定义模板',
            color: 'primary',
            mode: 'raised',
          }"
        />
      }
    </div>
  </div>
</div>
